<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品分析看板</title>
    <!-- 引入外部资源 -->
    <script src="../public/js/tailwindcss3.4.16"></script>
    <link href="../font-awesome/css/all.min.css" rel="stylesheet">
    <script src="../chart.umd.min.js"></script>
    <link rel="stylesheet" href="style.css">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        success: '#00B42A',
                        info: '#86909C',
                        light: '#F2F3F5',
                        dark: '#1D2129',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
    <style>
    /* 折叠时隐藏侧边栏文字，仅显示图标 */
    .sidebar-collapsed span,
    .sidebar-collapsed .text-xs,
    .sidebar-collapsed .font-semibold,
    .sidebar-collapsed h1 {
        display: none !important;
    }
    .sidebar-collapsed nav {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Tab按钮样式 */
    .tab-btn {
        background-color: #f2f3f5;
        color: #86909c;
        border: 1px solid transparent;
    }
    .tab-btn:hover {
        background-color: #e5e6eb;
        color: #4e5969;
    }
    .tab-btn.active {
        background-color: #165DFF;
        color: white;
        border-color: #165DFF;
    }
    
    /* 产品Tab按钮样式 */
    .product-tab-btn {
        background-color: #f2f3f5;
        color: #86909c;
        border: 1px solid transparent;
    }
    .product-tab-btn:hover {
        background-color: #e5e6eb;
        color: #4e5969;
    }
    .product-tab-btn.active {
        background-color: #165DFF;
        color: white;
        border-color: #165DFF;
    }
    
    /* 技术Tab按钮样式 */
    .tech-tab-btn {
        background-color: #f2f3f5;
        color: #86909c;
        border: 1px solid transparent;
    }
    .tech-tab-btn:hover {
        background-color: #e5e6eb;
        color: #4e5969;
    }
    .tech-tab-btn.active {
        background-color: #165DFF;
        color: white;
        border-color: #165DFF;
    }
    
    /* 模态框Tab按钮样式 */
    .modal-tab-btn {
        background-color: #f2f3f5;
        color: #86909c;
        border: 1px solid transparent;
    }
    .modal-tab-btn:hover {
        background-color: #e5e6eb;
        color: #4e5969;
    }
    .modal-tab-btn.active {
        background-color: #165DFF;
        color: white;
        border-color: #165DFF;
    }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark">
<!-- 顶部导航栏 -->
<header class="bg-white fixed top-0 left-0 right-0 z-50 nav-shadow">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <!-- 侧边栏折叠/展开按钮 -->
            <button id="toggleSidebar" class="mr-2 text-primary text-2xl focus:outline-none">
                <i class="fa fa-bars"></i>
            </button>
            <h1 class="text-xl font-bold text-primary">产品分析看板</h1>
        </div>

        <div class="flex items-center space-x-4">
            <div class="relative">
                <input type="text" placeholder="搜索指标..." class="pl-10 pr-4 py-2 rounded-full border border-gray-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>

            <div class="relative">
                <button class="flex items-center space-x-1 text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-bell text-lg"></i>
                    <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">5</span>
                </button>
            </div>

            <div class="flex items-center space-x-2">
                <img src="../public/image/user.jpg" alt="用户头像" class="h-8 w-8 rounded-full object-cover border-2 border-primary">
                <span class="text-sm font-medium">管理员</span>
            </div>
        </div>
    </div>
</header>

<!-- 侧边栏导航 -->
<aside id="sidebar" class="fixed top-0 left-0 bottom-0 w-64 bg-white pt-16 nav-shadow z-40 transition-all duration-300 ease-in-out transform">
    <div class="h-full overflow-y-auto scrollbar-hide">
        <nav class="p-4 space-y-1">
            <div class="text-xs uppercase text-gray-400 font-semibold mb-2 pl-2">分析维度</div>

            <a href="#product-research" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-flask text-lg w-5 text-center"></i>
                <span>产品研发分析</span>
            </a>

            <a href="#product-production" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-industry text-lg w-5 text-center"></i>
                <span>产品生产分析</span>
            </a>

            <a href="#product-quality" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-check-circle text-lg w-5 text-center"></i>
                <span>产品质量分析</span>
            </a>

            <a href="#product-market" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-chart-line text-lg w-5 text-center"></i>
                <span>产品市场分析</span>
            </a>

            <a href="#confidentiality-compliance" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-shield-alt text-lg w-5 text-center"></i>
                <span>保密合规分析</span>
            </a>

            <div class="text-xs uppercase text-gray-400 font-semibold mb-2 pl-2">分析看板</div>
            
            <a href="../客户分析看板html5/customer.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-users text-lg w-5 text-center"></i>
                <span>1.客户</span>
            </a>
            <a href="../供应商分析看板html5/supplier.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-truck text-lg w-5 text-center"></i>
                <span>2.供应商</span>
            </a>
            <a href="../物资分析看板html5/materials.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-cubes text-lg w-5 text-center"></i>
                <span>3.物资</span>
            </a>
            <a href="../产品分析看板html5/product.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-cube text-lg w-5 text-center"></i>
                <span>4.产品</span>
            </a>
            <a href="../人员分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-user-friends text-lg w-5 text-center"></i>
                <span>5.人员</span>
            </a>
            <a href="../业务领域分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-sitemap text-lg w-5 text-center"></i>
                <span>6.业务领域</span>
            </a>
            <a href="../型号项目成本分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-calculator text-lg w-5 text-center"></i>
                <span>7.型号项目成本</span>
            </a>
            <a href="../财务指标分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-chart-line text-lg w-5 text-center"></i>
                <span>8.财务指标</span>
            </a>
            <a href="../固定资产投资效果分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-building text-lg w-5 text-center"></i>
                <span>9.固定资产投资效果</span>
            </a>
            <a href="../研发创新效果分析看板html5/index.html" class="flex items-center space-x-3 px-3 py-2.5 rounded-lg text-gray-600 hover:bg-gray-100 transition-colors">
                <i class="fa fa-flask text-lg w-5 text-center"></i>
                <span>10.研发创新效果</span>
            </a>
        </nav>
    </div>
</aside>

<!-- 主内容区 -->
<main id="mainContent" class="pt-16 pb-10 pl-64 min-h-screen">
    <div class="container mx-auto px-4 py-6">
        <!-- 筛选条件区域 -->
        <div class="bg-white rounded-xl p-4 mb-6 card-shadow">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div class="flex flex-wrap items-center gap-4">
                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">时间:</span>
                        <select id="timeRange" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="week">最近7天</option>
                            <option value="month" selected>最近30天</option>
                            <option value="quarter">最近90天</option>
                            <option value="year">最近12个月</option>
                            <option value="custom">自定义...</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">产品类型:</span>
                        <select id="productType" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部类型</option>
                            <option value="type1">产品A</option>
                            <option value="type2">产品B</option>
                            <option value="type3">产品C</option>
                            <option value="type4">产品D</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">技术领域:</span>
                        <select id="techField" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部领域</option>
                            <option value="electronics">电子技术</option>
                            <option value="mechanical">机械技术</option>
                            <option value="chemical">化工技术</option>
                            <option value="material">材料技术</option>
                            <option value="aerospace">航空航天</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">生产基地:</span>
                        <select id="productionBase" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部基地</option>
                            <option value="base1">生产基地A</option>
                            <option value="base2">生产基地B</option>
                            <option value="base3">生产基地C</option>
                            <option value="base4">生产基地D</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">客户等级:</span>
                        <select id="customerLevel" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部等级</option>
                            <option value="vip">VIP客户</option>
                            <option value="gold">金牌客户</option>
                            <option value="silver">银牌客户</option>
                            <option value="bronze">铜牌客户</option>
                        </select>
                    </div>

                    <div class="flex items-center">
                        <span class="text-gray-600 mr-2">项目状态:</span>
                        <select id="projectStatus" class="px-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="all" selected>全部状态</option>
                            <option value="planning">规划中</option>
                            <option value="developing">开发中</option>
                            <option value="testing">测试中</option>
                            <option value="completed">已完成</option>
                        </select>
                    </div>
                </div>

                <div class="flex items-center">
                    <button id="applyFilter" class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors flex items-center">
                        <i class="fa fa-filter mr-2"></i>
                        <span>应用筛选</span>
                    </button>
                    <button id="resetFilter" class="ml-2 text-gray-600 hover:text-gray-800 px-4 py-2 rounded-lg transition-colors flex items-center">
                        <i class="fa fa-refresh mr-2"></i>
                        <span>重置</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 一级驾驶舱 - 产品研发分析 -->
        <section id="product-research" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">产品研发分析</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- 研发项目基础指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('projectProgress')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">研发项目进度完成率</h3>
                        <i class="fa fa-tasks text-success"></i>
                    </div>
                    <p class="text-2xl font-bold">87.5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +5.2%</span>
                        <span class="text-success">环比 +2.1%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('investmentOutput')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">研发投入产出比</h3>
                        <i class="fa fa-balance-scale text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">1:3.2</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +0.3</span>
                        <span class="text-success">环比 +0.1</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('newTechRatio')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">新技术应用占比</h3>
                        <i class="fa fa-lightbulb text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">68.5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +8.5%</span>
                        <span class="text-success">环比 +3.2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('patentCount')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">专利申请数量</h3>
                        <i class="fa fa-certificate text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">156</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +12.3%</span>
                        <span class="text-success">环比 +4.8%</span>
                    </div>
                </div>
            </div>

            <!-- 产品研发分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">研发项目进度完成率TOP5</h3>
                        <button onclick="showDetail('projectProgressDetail')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="flex items-center">
                        <div class="flex-1 h-64">
                            <canvas id="projectProgressChart"></canvas>
                        </div>
                        <div class="w-32 ml-4">
                            <div id="projectProgressLegend" class="text-sm space-y-2">
                                <!-- 图例将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">研发投入产出比</h3>
                        <button onclick="showDetail('investmentOutputDetail')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="flex items-center">
                        <div class="flex-1 h-64">
                            <canvas id="investmentOutputChart"></canvas>
                        </div>
                        <div class="w-32 ml-4">
                            <div id="investmentOutputLegend" class="text-sm space-y-2">
                                <!-- 图例将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>

                <!-- <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">新技术应用占比</h3>
                        <button onclick="showDetail('newTechDetail')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="flex items-center">
                        <div class="flex-1 h-64">
                            <canvas id="newTechChart"></canvas>
                        </div>
                        <div class="w-32 ml-4">
                            <div id="newTechLegend" class="text-sm space-y-2">
                            </div>
                        </div>
                    </div>
                </div> -->
            </div>
        </section>

        <!-- 一级驾驶舱 - 产品质量分析 -->
        <section id="product-quality" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">产品质量分析</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- 质量指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('productQualification')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">产品合格率</h3>
                        <i class="fa fa-check-circle text-success"></i>
                    </div>
                    <p class="text-2xl font-bold">96.8%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +1.5%</span>
                        <span class="text-success">环比 +0.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('defectRate')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">产品缺陷率</h3>
                        <i class="fa fa-exclamation-triangle text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">3.2%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -1.2%</span>
                        <span class="text-success">环比 -0.5%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('complaintRate')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">质量问题投诉率</h3>
                        <i class="fa fa-comments text-danger"></i>
                    </div>
                    <p class="text-2xl font-bold">1.8%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -0.8%</span>
                        <span class="text-success">环比 -0.3%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('qualityCost')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">质量成本率</h3>
                        <i class="fa fa-rmb text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">2.5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -0.5%</span>
                        <span class="text-success">环比 -0.2%</span>
                    </div>
                </div>
            </div>

            <!-- 质量分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">产品合格率趋势</h3>
                        <button onclick="showDetail('qualificationTrend')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="qualificationTrendChart"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">缺陷类型TOP3</h3>
                        <button onclick="showDetail('defectTop3')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="defectTop3Chart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 产品生产分析 -->
        <section id="product-production" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">产品生产分析</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- 生产计划指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('productionCompletion')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">生产计划完成率</h3>
                        <i class="fa fa-check-square text-success"></i>
                    </div>
                    <p class="text-2xl font-bold">92.8%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +3.5%</span>
                        <span class="text-success">环比 +1.2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('equipmentUtilization')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">生产设备利用率</h3>
                        <i class="fa fa-cogs text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">85.6%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +4.2%</span>
                        <span class="text-success">环比 +2.1%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('productionEfficiency')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">生产效率指数</h3>
                        <i class="fa fa-tachometer text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">88.5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +5.8%</span>
                        <span class="text-success">环比 +2.3%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('productionCost')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">单位生产成本</h3>
                        <i class="fa fa-rmb text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">¥1,250</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 -8.5%</span>
                        <span class="text-success">环比 -3.2%</span>
                    </div>
                </div>
            </div>

            <!-- 生产分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">生产计划完成率TOP5</h3>
                        <button onclick="showDetail('productionCompletionDetail')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="mb-2">
                        <canvas id="productionCompletionRateLineChart" height="60"></canvas>
                    </div>
                    <div class="flex items-center">
                        <div class="flex-1 h-64">
                            <canvas id="productionCompletionChart"></canvas>
                        </div>
                        <div class="w-32 ml-4">
                            <div id="productionCompletionLegend" class="text-sm space-y-2">
                                <!-- 图例将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">生产设备利用率</h3>
                        <button onclick="showDetail('equipmentUtilizationDetail')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="flex items-center">
                        <div class="flex-1 h-64">
                            <canvas id="equipmentUtilizationChart"></canvas>
                        </div>
                        <div class="w-32 ml-4">
                            <div id="equipmentUtilizationLegend" class="text-sm space-y-2">
                                <!-- 图例将通过JavaScript动态生成 -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 产品市场分析 -->
        <section id="product-market" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">产品市场分析</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- 市场表现指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('marketShare')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">产品市场占有率</h3>
                        <i class="fa fa-chart-pie text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">18.5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +2.8%</span>
                        <span class="text-success">环比 +1.2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('salesGrowth')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">产品销售增长率</h3>
                        <i class="fa fa-chart-line text-secondary"></i>
                    </div>
                    <p class="text-2xl font-bold">15.8%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +3.2%</span>
                        <span class="text-success">环比 +1.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('customerRepurchase')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">客户复购率</h3>
                        <i class="fa fa-users text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">72.5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +5.2%</span>
                        <span class="text-success">环比 +2.1%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('customerSatisfaction')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">客户满意度</h3>
                        <i class="fa fa-smile-o text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">4.6/5.0</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +0.2</span>
                        <span class="text-success">环比 +0.1</span>
                    </div>
                </div>
            </div>

            <!-- 市场分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">产品市场占有率</h3>
                        <button onclick="showDetail('marketShareDetail')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="marketShareChart"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">客户复购分析</h3>
                        <button onclick="showDetail('repurchaseDetail')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="repurchaseChart"></canvas>
                    </div>
                </div>
            </div>
        </section>

        <!-- 一级驾驶舱 - 保密合规分析 -->
        <section id="confidentiality-compliance" class="mb-8">
            <div class="flex items-center justify-between mb-4">
                <h2 class="text-2xl font-bold text-dark">保密合规分析</h2>
                <div class="text-sm text-gray-500"></div>
            </div>

            <!-- 保密合规指标 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('supplierCompliance')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">供应商保密达标率</h3>
                        <i class="fa fa-shield text-success"></i>
                    </div>
                    <p class="text-2xl font-bold">95.8%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +2.5%</span>
                        <span class="text-success">环比 +1.2%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('employeeCompliance')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">员工保密合规率</h3>
                        <i class="fa fa-user-secret text-primary"></i>
                    </div>
                    <p class="text-2xl font-bold">98.2%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +1.8%</span>
                        <span class="text-success">环比 +0.8%</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('documentSecurity')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">文档安全等级</h3>
                        <i class="fa fa-lock text-warning"></i>
                    </div>
                    <p class="text-2xl font-bold">A级</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 提升</span>
                        <span class="text-success">环比 稳定</span>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-4 card-shadow hover-scale cursor-pointer" onclick="showDetail('auditPassRate')">
                    <div class="flex items-center justify-between mb-2">
                        <h3 class="text-gray-600 font-medium text-sm">保密审计通过率</h3>
                        <i class="fa fa-check-square text-info"></i>
                    </div>
                    <p class="text-2xl font-bold">96.5%</p>
                    <div class="flex justify-between text-xs mt-1">
                        <span class="text-success">同比 +3.2%</span>
                        <span class="text-success">环比 +1.5%</span>
                    </div>
                </div>
            </div>

            <!-- 保密合规分析图表 -->
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">供应商保密达标情况</h3>
                        <button onclick="showDetail('supplierComplianceDetail')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64">
                        <canvas id="supplierComplianceChart"></canvas>
                    </div>
                </div>

                <div class="bg-white rounded-xl p-5 card-shadow">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold">保密风险TOP5</h3>
                        <button onclick="showDetail('securityRiskTop5')" class="text-primary text-sm hover:underline">
                            详细分析 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                    </div>
                    <div class="h-64 overflow-y-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b border-gray-200">
                                    <th class="text-left py-2">排名</th>
                                    <th class="text-left py-2">风险类型</th>
                                    <th class="text-right py-2">风险等级</th>
                                    <th class="text-right py-2">影响范围</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2">1</td>
                                    <td class="py-2 font-medium">数据泄露风险</td>
                                    <td class="py-2 text-right text-danger">高风险</td>
                                    <td class="py-2 text-right">核心数据</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2">2</td>
                                    <td class="py-2 font-medium">人员流动风险</td>
                                    <td class="py-2 text-right text-warning">中风险</td>
                                    <td class="py-2 text-right">技术秘密</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2">3</td>
                                    <td class="py-2 font-medium">供应链风险</td>
                                    <td class="py-2 text-right text-warning">中风险</td>
                                    <td class="py-2 text-right">供应商信息</td>
                                </tr>
                                <tr class="border-b border-gray-100">
                                    <td class="py-2">4</td>
                                    <td class="py-2 font-medium">系统安全风险</td>
                                    <td class="py-2 text-right text-warning">中风险</td>
                                    <td class="py-2 text-right">IT系统</td>
                                </tr>
                                <tr>
                                    <td class="py-2">5</td>
                                    <td class="py-2 font-medium">物理安全风险</td>
                                    <td class="py-2 text-right text-warning">中风险</td>
                                    <td class="py-2 text-right">办公场所</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    </div>
</main>

<!-- 穿透查询模态框 -->
<div id="detailModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center">
    <div class="bg-white rounded-xl w-full max-w-6xl max-h-[90vh] overflow-hidden flex flex-col">
        <div class="p-5 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-semibold" id="modalTitle">详细分析</h3>
            <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-5 overflow-y-auto flex-1" id="modalContent">
            <!-- 这里将通过JavaScript动态填充内容 -->
        </div>
        <div class="p-5 border-t border-gray-200 flex justify-end">
            <button id="closeModalBtn" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors">
                关闭
            </button>
        </div>
    </div>
</div>

<!-- JavaScript 代码 -->
<script src="product.js"></script>
</body>
</html> 